import React, {Component} from 'react'
import './left-nav.less'
import logo from '../../assets/images/logo.png'
import {Link, withRouter} from 'react-router-dom'
import {Menu, Icon} from "antd";
import menuList1 from '../../config/menuList1'

const SubMenu = Menu.SubMenu;

class LeftNav extends Component {
    /**
     * 根据menu的数据数组生成对应的标签数组
     * 使用map+递归调用
     * */
    getMenuNodes_map = (menuList1) => {
        return menuList1.map(item => {
            /**
             *  {
                    title: '首页',
                    key: '/home',
                    icon: 'home',
                    children: [], 可能有也可能没有
              },
             * */
            if (!item.children) {
                return (
                    <Menu.Item key={item.key}>
                        <Link to={item.key}>
                            <Icon type={item.icon}/>
                            <span>{item.title}</span>
                        </Link>
                    </Menu.Item>
                )
            } else {
                return (
                    <SubMenu
                        key={item.key}
                        title={
                            <span>
                                <Icon type={item.icon}></Icon>
                                <span>{item.title}</span>
                            </span>
                        }
                    >
                        {this.getMenuNodes(item.children)}
                    </SubMenu>
                )
            }

        })
    }

    /**
     * 根据menu的数据数组生成对应的标签数组
     * 使用redure+递归调用
     * @returns {*}
     */
    getMenuNodes = (menuList1) => {
        //查找一个与当前请求路径匹配的子Item
        const path = this.props.location.pathname

        return menuList1.reduce((pre, Item) => {
            //向pro中添加<Menu.Item>
            if (!Item.children) {
                pre.push((
                    <Menu.Item key={Item.key}>
                        <Link to={Item.key}>
                            <Icon type={Item.icon}/>
                            <span>{Item.title}</span>
                        </Link>
                    </Menu.Item>
                ))
            } else {
                //查找一个与当前请求路径匹配的子Item
                const cItem = Item.children.find(cItem => cItem.key === path)
                //如果存在，说明当前item的子列需要打开
                if (cItem) {
                    this.openKey = Item.key
                }
                //向pro中添加<SubMenu>
                pre.push((
                    <SubMenu key={Item.key}
                             title={
                                 <span>
                                <Icon type={Item.icon}></Icon>
                                <span>{Item.title}</span>
                            </span>
                             }
                    >
                        {this.getMenuNodes(Item.children)}
                    </SubMenu>
                ))
            }
            return pre
        }, [])
    }

    //在第一次render（）之前执行一次
    //为第一个render（）渲染做准备数据（必须同步的）
    componentWillMount() {
        this.menuNodes = this.getMenuNodes(menuList1)
    }

    render() {
        //的到当前请求的路由路径
        const selectKey = this.props.location.pathname
        console.log('render()', selectKey,this.openKey)
        //得到需要打开的菜单项的key
        const openKey = this.openKey
        return (
            < div
                className="left-nav">
                < Link to='/'
                       className="left-nav-header">
                    < img
                        src={logo}
                        alt="logo"/>
                    <h1> React后台 </h1>
                </Link>

                <Menu
                    mode="inline"
                    theme="dark"
                    selectedKeys={[selectKey]}
                    defaultOpenKeys={[openKey]}
                >
                    {
                        this.menuNodes
                    }

                </Menu>
            </div>
        )


    }

}

/**
 * withRouter高阶组件
 * 包装非路由组件，返回一个新的组件
 * 新的组件向非路由组件传递三个属性：history/Location/match
 */
export default withRouter(LeftNav)